<template>
  <div class="box">
    <div class="top">
      <div class="serach">
        <!-- 搜索框 -->
        <div class="city">
          <router-link to="/citylist">
          <span>上海<van-icon name="arrow-down" /></span>
          </router-link>
          <i>\</i>
        </div>
        <button type="submit">
          <van-icon name="search" />
        </button>
        <input type="text" placeholder="请输入小区或地址" />
      </div>
      <div class="map">
        <van-icon name="map-marked" />
      </div>
      <!-- 轮播图 -->
      <van-swipe :autoplay="3000">
        <van-swipe-item v-for="(image, index) in images" :key="index">
          <img v-lazy="image" style="height: 212px" />
        </van-swipe-item>
      </van-swipe>
    </div>
    <!-- 列表 -->
    <div class="detail-list">
      <div class="list">
        <van-icon name="wap-home" size="40" color="#0dbc79" />
        <h2>整租</h2>
      </div>
      <div class="list">
        <van-icon name="friends" size="40" color="#0dbc79" />
        <h2>合租</h2>
      </div>
      <div class="list">
        <router-link to="/maphouse">
          <van-icon name="map-marked" size="40" color="#0dbc79" />
          <h2>地图找房</h2>
        </router-link>
      </div>
      <div class="list">
        <van-icon name="smile" size="40" color="#0dbc79" />
        <h2>去出租</h2>
      </div>
    </div>
    <!-- 租房小组 -->
    <div class="group">
      <!-- group-title -->
      <div class="group-title">
        <h3>租房小组</h3>
        <span>更多</span>
      </div>
      <div class="box">
        <div class="group-body" v-for="(item, index) in list" :key="index">
        <!-- 主体上面 -->
        <div class="group-body-top">
          <div class="top-left">
            <img :src="`http://liufusong.top:8080${item.imgSrc}`" alt="" />
            <div class="text">
              <p>
              <span>{{ item.title }}</span
              >
            </p>
            <p>
              <span>{{ item.desc }}</span>
            </p>
            </div>
          </div>

          <!-- 右 -->
          <!-- <div class="top-right">
            <img :src="`http://liufusong.top:8080${item.imgSrc}`" alt="" />
            <p>
              <span>{{item.title}}</span><br />
              <span>{{item.desc}}</span>
            </p>
          </div>
        </div> -->
          <!-- <div class="group-body-bottom">
          <div class="top-left">
            <img src="" alt="" />
            <p>
              <span>喧嚣三里屯</span><br />
              <span>繁华的背后</span>
            </p>
          </div> -->
          <!-- 右 -->
          <!-- <div class="top-right">
            <img src="" alt="" />
            <p>
              <span>比邻十号线</span><br />
              <span>地铁心连心</span>
            </p>
          </div> -->
        </div>
      </div>
      </div>
      
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "VueJobMain",

  data() {
    return {
      images: [
        "http://liufusong.top:8080/img/swiper/1.png",
        "http://liufusong.top:8080/img/swiper/2.png",
        "http://liufusong.top:8080/img/swiper/3.png",
      ],
      list: [],
    };
  },

  mounted() {
    this.getRentlist();
  },

  methods: {
    async getRentlist() {
      const res = await axios({
        url: "http://liufusong.top:8080/home/groups",
      });
      console.log(res);
      this.list = res.data.body;
    },
  },
};
</script>

<style lang="less" scoped>
.box {
  font-size: 14px;
}
.top {
  position: relative;
  .serach {
    position: absolute;
    top: 30px;
    width: 85%;
    height: 34px;
    z-index: 999;
    margin-left: 10px;
    background-color: white;
    .city {
      width: 20%;
      float: left;
      margin-left: 12px;
      line-height: 34px;
     span{
      color: #333;
     }
      i {
        margin-left: 5px;
        color: #999;
      }
    }
    button {
      width: 10%;
      height: 100%;
      background-color: transparent;
      border: 0;
    }
    input {
      width: 55%;
      height: 32px;
      border: 0px solid transparent;
      border-radius: 5px;
      &::placeholder {
        color: #ccc;
      }
    }
  }
  .map {
    position: fixed;
    right: 20px;
    top: 30px;
    width: 20px;
    line-height: 34px;
    display: inline-block;
    color: #fff;
    font-size: 20px;
    van-icon {
      width: 100%;
    }
  }
}

// 列表
.detail-list {
  display: flex;
  height: 123px;
  .list {
    text-align: center;
    height: 103px;
    width: 25%;
    padding: 10px 0;
    margin-top: 5px;
    a {
      color: #333;
    }
    h2 {
      font-weight: 400;
      font-size: 12px;
      margin: 15px 0;
    }
  }
}

.group {
  height: 188px;
  .group-title {
    display: flex;
    height: 18px;
    line-height: 18px;
    text-align: center;
    display: flex;
    justify-content: space-between;
    padding: 15px 10px 0;
    h3 {
      margin-top: 0;
      font-size: 14px;
      // padding-top: 5px;
      // padding-left:10px;
    }
    span {
      font-size: 12px;
      color: #999999;
    }
  }

  background-color: #f5f5f9;
  .box{
    display:flex;
    flex-wrap: wrap;
    width: 100%;
    height: 130px;
    .group-body {
    // display: flex;
    width: 185px;
    height: 70px;
    // div {
    //   height: 50px;
    //   width: 49%;
    // }
    img {
      width: 50px;
      height: 50px;
}
    .group-body-top,
    .group-body-bottom {
      div {
        width: 100%;
        background-color: #fff;
      }
      .top-left,
      .top-right {
        display: flex;
        width: 172px;
        height: 60px;
        color: #333;
        font-size: 14px;
        align-items: center;
        text-align: center;
        margin: 5px;
        .text{
          p{
          margin: 0; 
          // padding: 10px 0;
          span{
            padding-top: 5px;
          }
        }
        }
      }
    }
  }
  }
}
</style>
